<template>
  <div class="card">
    <div class="card-header" v-if="title">
      <div class="line"></div>
<!--      <div class="header-title">{{title}}</div>-->
      <div class="header-title" :class="{'six-methods': title === '“六心”调处工作法'}">
        {{title}}
      </div>
    </div>
    <div class="card-body">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Card',
  props:{
    title:{
      type:String,
      required:true
    }
  }
}
</script>

<style scoped lang="scss">
.card{
  width: 100%;
  height: 100%;
  border-radius: 8px;
  border: 1px solid #2C99D2;
  padding: 18px;
  background: rgba(0,0,0,.3);
  .card-header{
    height: 20px;
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    .line{
      width: 10px;
      height: 100%;
      background: linear-gradient(to right, #1c85fe, #22e3e7);
      border-radius: 15px;
      margin-right: 10px;
    }
    .header-title{
      font-family: 冷酷体;
      color: #35B2FB;
      font-size: 18px;
      &.six-methods {
        color: #ff4747 !important;
        font-size: 20px;
      }
    }
  }
  .card-body{
    width: 100%;
    height: calc(100% - 38px);
  }
}
</style>
